<template>
  <div class="question">
    <!-- 退出按钮 -->
    <div class="question-exit">
      <button class="question-exit__button" @click="exit">放弃并退出</button>
    </div>
    <!-- 标题 -->
    <div class="question-title">
      <img src="@/assets/icon.png" alt="音符图标" />
      <span class="question-title__num"
        >{{ question.times }}/{{ question.total }}</span
      >
    </div>
    <!-- 播放 -->
    <div class="question-player">
      <img
        class="question-player__playIcon"
        :src="
          isPlaying
            ? require('@/assets/pause.png')
            : require('@/assets/play.png')
        "
        alt="播放图标"
        @click="play"
        ref="playBtn"
      />
      <audio :src="question.musicUrl" ref="music">
      <!-- <audio :src="question.musicUrl" ref="music" controls> -->
        <source type="audio/mpeg" />
      </audio>
      <span class="question-player__notice">剩余{{ 2 - count }}次播放机会</span>
    </div>
    <!-- 选项列表 -->
    <div class="question-list">
      <ul
        v-for="item in question.options"
        :key="item.optionId"
        @click="selectItem(item.optionId)"
      >
        <li>{{ item.musicName }}</li>
      </ul>
    </div>
    <!-- 跳转题目 -->
    <div class="question-admit">
      <button class="question-admit__button" ref="admitBtn" @click="admit">
        提交答案
      </button>
    </div>
    <notice-dialog
      v-if="showDialog"
      :gameScore="checkResult.gameScore"
      :checkStatus="checkResult.checkStatus"
      @to-next="toNext"
    ></notice-dialog>
  </div>
</template>

<script>
import questionApi from "@/api/question";
import NoticeDialog from "@/components/question/NoticeDialog.vue";
export default {
  components: {
    NoticeDialog,
  },
  data() {
    return {
      count: 0, //播放音频次数
      selected: "",
      question: {},
      isPlaying: false,
      checkResult: {},
      showDialog: false,
    };
  },

  mounted() {
    this.getQuestion();
  },

  methods: {
    // 退出
    exit() {
      console.log("退出");
      this.$router.push("/ranking");
    },
    // 获取新题（下一题）
    toNext() {
      if (this.question.times === 6) {
        console.log("没有题了");
        this.$router.push("/");
      } else {
        this.getQuestion();
        this.showDialog = false;
        this.isPlaying = false;
        this.$refs.music.pause();
      }
    },
    // 获取题目信息
    getQuestion() {
      this.count = 0;
      let _this = this;
      questionApi
        .getQuestion()
        .then((res) => {
          console.log(res);
          _this.question = res.data.question;
          // _this.setTime()
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 设置音频起始时间
    setTime() {
      this.$refs.music.currentTime = "40";
    },

    // 播放音频
    play() {
      console.log(this.count);
      if (this.count < 2) {
        this.count++;
        this.isPlaying = false;
        // 重新设置音频起始时间
        this.setTime();
        let _this = this;
        this.$refs.music.play();
        this.isPlaying = true;
        // 播放20s后暂停
        setTimeout(() => {
          _this.$refs.music.pause();
          _this.isPlaying = false;
        }, 20000);
      } else {
        console.log("播放次数已达上线");
      }
    },

    // 选择
    selectItem(optionId) {
      this.selected = optionId;
    },

    // 提交答案
    admit() {
      this.showDialog = true;
      let _this = this;
      console.log(this.selected);
      let params = {
        optionId: this.selected,
        questionId: this.question.questionId,
      };
      questionApi.checkAnswer(params).then((res) => {
        // console.log(res.data.checkResult);
        _this.checkResult = res.data.checkResult;
        console.log(_this.checkResult);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.question {
  height: 100%;
  display: flex;
  flex-direction: column;
  .question-exit {
    position: absolute;
    top: 5px;
    left: 5px;
    .question-exit__button {
      padding: 10px;
      background-color: #1c6caf;
      border: 1px solid #b1dcdc;
      border-radius: 10px;
      color: #ebfcfb;
    }
  }
  .question-title {
    margin-top: 25px;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 25%;
    }
    .question-title__num {
      font-size: 40px;
      margin-left: 20px;
      color: #399bad;
    }
  }
  .question-player {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .question-player__playIcon {
      width: 40px;
    }
    .question-player__notice {
      margin-top: 10px;
      font-size: 13px;
      color: #1c6caf;
    }
  }
  .question-list {
    flex: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;

    ul {
      transition: all 1s;
      min-width: 200px;
      border: 1px solid white;
      border-radius: 15px;
      padding: 10px;
      text-align: center;
      li {
        list-style: none;
      }
    }
    ul:hover {
      background: #daf4f2;
      color: #3a9bb1;
      border: 1px solid #daf4f2;
    }
  }
  .question-admit {
    display: flex;
    justify-content: right;
    margin: 10px;
    .question-admit__button {
      padding: 10px;
      background-color: #7cbec5;
      border: 1px solid #b1dcdc;
      border-radius: 10px;
      color: #ebfcfb;
    }
    .question-admit__button:active {
      background-color: #178ea8;
    }
  }
}
</style>